<template>
  <a-page-header title="用户管理" />
    <div id="user-management-page">
      <a-input-search
          style="max-width: 320px"
          v-model:value="searchValue"
          placeholder="输入用户名搜索"
          enter-button="搜索"
          size="large"
          @search="onSearch"
      />
      <div class="user-table">
        <a-table :data-source="data" :columns="columns">
          <template #headerCell="{ column }">
            <div v-if="column.dataIndex === 'action'">操作</div>
          </template>
          <template #bodyCell="{ record, column }">
            <template v-if="column.dataIndex === 'avatar'">
              <a-image :src="record.avatarUrl" :width="120" />
            </template>
            <template v-else-if="column.dataIndex === 'role'">
              <div v-if="record.role === 1">
                <a-tag color="green">管理员</a-tag>
              </div>
              <div v-else>
                <a-tag color="blue">普通用户</a-tag>
              </div>
            </template>
            <template v-if="column.dataIndex === 'gender'">
              <div v-if="record.gender === 1">
                <a-tag color="blue">男</a-tag>
              </div>
              <div v-else-if="record.gender === 2">
                <a-tag color="red">女</a-tag>
              </div>
              <div v-else>
                <a-tag color="green">保密</a-tag>
              </div>
            </template>
            <template v-if="column.dataIndex === 'status'">
              <div v-if="record.status === 1">
                <a-tag color="red">封禁</a-tag>
              </div>
              <div v-else>
                <a-tag color="blue">正常</a-tag>
              </div>
            </template>
            <div v-if="column.dataIndex === 'action'">
              <a-button @click="handleEdit(record.id)">编辑</a-button>
              <a-button danger @click="handleDelete(record.id)">删除</a-button>
            </div>
          </template>
        </a-table>
      </div>
    </div>

</template>

<script setup lang="ts">
import { ref } from 'vue';
import {deleteUser, searchUsers} from "../../apis/user.js";
import {message} from "ant-design-vue";

const data = ref([]);
const searchValue = ref('');
const onSearch = () => {
  fetchData(searchValue.value);
};
const columns = ref([
  {
    title: 'ID',
    dataIndex: 'id',
  },
  {
    title: '账号',
    dataIndex: 'account',
  },
  {
    title: '昵称',
    dataIndex: 'username',
  },
  {
    title: '头像',
    dataIndex: 'avatar',
  },
  {
    title: '性别',
    dataIndex: 'gender',
  },
  {
    title: '电话',
    dataIndex: 'phone',
  },
  {
    title: '邮件',
    dataIndex: 'email',
  },
  {
    title: '标签',
    dataIndex: 'tags',
  },
  {
    title: '个人简介',
    dataIndex: 'biography',
  },
  {
    title: '状态',
    dataIndex: 'status',
  },
  {
    title: '角色',
    dataIndex: 'role',
  },
  {
    title: '操作',
    dataIndex: 'action',
  },
]);

const handleEdit =  () => {

};

const handleDelete =async (id: string) => {
  if (!id) {
    return;
  }
  const res = await deleteUser(id);
  if (res.data.code === 1) {
    message.success("删除成功");
    await fetchData();
  } else {
    message.error("删除失败");
  }
};

const fetchData = async (username = "") => {
  const res = await searchUsers(username);
  if (res.data.data){
    data.value = res.data.data || [];
  }else{
    message.error("获取数据失败");
  }
};
fetchData();
</script>

<style scoped>
#user-management-page {
  padding: 2rem;
}
</style>
